import 'dart:math';

import 'package:flutter/material.dart';
import 'package:hb_check_code/hb_check_code.dart';

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  var _scrollController = ScrollController();
  // var _showBackTop = false;

  @override
  void initState() {
    super.initState();

    // 对 scrollController 进行监听
    _scrollController.addListener(() {
      // _scrollController.position.pixels 获取当前滚动部件滚动的距离
      // 当滚动距离大于 800 之后，显示回到顶部按钮
      // setState(() => _showBackTop = _scrollController.position.pixels >= 800);
    });
  }

  @override
  void dispose() {
    // 记得销毁对象
    _scrollController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Scrollbar(
         isAlwaysShown:true,
         showTrackOnHover:true,
        hoverThickness:10.0,
        thickness:10.0,
        radius:Radius.circular(0),
        child: ListView(
          controller: _scrollController,
          shrinkWrap: true,
          children: [
            Center(
              child: Container(
                constraints: BoxConstraints(maxWidth: 1920, maxHeight: 560),
                color: Colors.orange,
                width: 1920,
                height: 1080,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Positioned(
                      top: 0,
                      left: 0,
                      child: Container(
                        width: 1000,
                        height: 500,
                        color: Colors.redAccent,
                        alignment: Alignment.center,
                        child: SizedBox(
                          height: 100,
                          width: 100,
                          child: Text(
                            '1111111111111111111111111122221111111111111111111111111111111112',
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Center(
              child: Container(
                constraints: BoxConstraints(maxWidth: 1920, maxHeight: 560),
                color: Colors.orange,
                width: 1920,
                height: 1080,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Positioned(
                      top: 0,
                      left: 0,
                      child: Container(
                        width: 1000,
                        height: 500,
                        color: Colors.redAccent,
                        alignment: Alignment.center,
                        child: SizedBox(
                          height: 100,
                          width: 100,
                          child: Text(
                            '1111111111111111111111111122221111111111111111111111111111111112',
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Center(
              child: Container(
                constraints: BoxConstraints(maxWidth: 1920, maxHeight: 560),
                color: Colors.orange,
                width: 1920,
                height: 1080,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Positioned(
                      top: 0,
                      left: 0,
                      child: Container(
                        width: 1000,
                        height: 500,
                        color: Colors.redAccent,
                        alignment: Alignment.center,
                        child: SizedBox(
                          height: 100,
                          width: 100,
                          child: Text(
                            '1111111111111111111111111122221111111111111111111111111111111112',
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Center(
              child: Container(
                constraints: BoxConstraints(maxWidth: 1920, maxHeight: 560),
                color: Colors.orange,
                width: 1920,
                height: 1080,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Positioned(
                      top: 0,
                      left: 0,
                      child: Container(
                        width: 1000,
                        height: 500,
                        color: Colors.redAccent,
                        alignment: Alignment.center,
                        child: SizedBox(
                          height: 100,
                          width: 100,
                          child: Text(
                            '1111111111111111111111111122221111111111111111111111111111111112',
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Center(
              child: Container(
                constraints: BoxConstraints(maxWidth: 1920, maxHeight: 560),
                color: Colors.orange,
                width: 1920,
                height: 1080,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Positioned(
                      top: 0,
                      left: 0,
                      child: Container(
                        width: 1000,
                        height: 500,
                        color: Colors.redAccent,
                        alignment: Alignment.center,
                        child: SizedBox(
                          height: 100,
                          width: 100,
                          child: Text(
                            '1111111111111111111111111122221111111111111111111111111111111112',
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Center(
              child: Container(
                constraints: BoxConstraints(maxWidth: 1920, maxHeight: 560),
                color: Colors.orange,
                width: 1920,
                height: 1080,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Positioned(
                      top: 0,
                      left: 0,
                      child: Container(
                        width: 1000,
                        height: 500,
                        color: Colors.redAccent,
                        alignment: Alignment.center,
                        child: SizedBox(
                          height: 100,
                          width: 100,
                          child: Text(
                            '1111111111111111111111111122221111111111111111111111111111111112',
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Center(
              child: Container(
                constraints: BoxConstraints(maxWidth: 1920, maxHeight: 560),
                color: Colors.orange,
                width: 1920,
                height: 1080,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Positioned(
                      top: 0,
                      left: 0,
                      child: Container(
                        width: 1000,
                        height: 500,
                        color: Colors.redAccent,
                        alignment: Alignment.center,
                        child: SizedBox(
                          height: 100,
                          width: 100,
                          child: Text(
                            '1111111111111111111111111122221111111111111111111111111111111112',
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Center(
              child: Container(
                constraints: BoxConstraints(maxWidth: 1920, maxHeight: 560),
                color: Colors.orange,
                width: 1920,
                height: 1080,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Positioned(
                      top: 0,
                      left: 0,
                      child: Container(
                        width: 1000,
                        height: 500,
                        color: Colors.redAccent,
                        alignment: Alignment.center,
                        child: SizedBox(
                          height: 100,
                          width: 100,
                          child: Text(
                            '1111111111111111111111111122221111111111111111111111111111111112',
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // scrollController 通过 animateTo 方法滚动到某个具体高度
          // duration 表示动画的时长，curve 表示动画的运行方式，flutter 在 Curves 提供了许多方式
          _scrollController.animateTo(0.0,
              duration: Duration(milliseconds: 500),
              curve: Curves.decelerate);
        },
        child: Icon(Icons.vertical_align_top),
      )
    );
  }
}

class CodeTestPage extends StatefulWidget {
  @override
  _CodeTestPageState createState() => _CodeTestPageState();
}
class _CodeTestPageState extends State<CodeTestPage> {
  @override
  Widget build(BuildContext context) {
    String code = "";
    for (var i = 0; i < 6; i++) {
      code = code + Random().nextInt(9).toString();
    }
    return Container(
        alignment: Alignment.center,
        child: HBCheckCode(
          code: code,
        ));
  }
}
